// 我的试卷页面
<template>
  <div id="myExam">
    <div class="wrapper">
      <ul class="top">
        <li class="order">试卷列表</li>
        <li class="search-li"><div class="icon"><input type="text" placeholder="试卷名称" class="search" v-model="key"><i class="el-icon-search"></i></div></li>
        <li><el-button type="primary" @click="search()">搜索试卷</el-button></li> 
      </ul>
    
      <ul class="paper" v-loading="loading">
        <li class="item" v-for="item in datas" :key="item.id">
           <!-- <p @click="toExamMsg(item.id)">{{item.subject}}</p> 
          <p class="name">{{item.subjectType}}-{{item.information}}</p> -->
          <div class="info">
            <img :src=item.image style="width:320px;height:210px;" class="image" >
           <h2 @click="toExamMsg(item.id)"><font color="blue">{{item.subjectType}}</font></h2>
          
          </div>
        </li>
      </ul>

      <div class="pagination">


        <!-- <el-pagination
      :current-page="pagination.current"
      :page-size="pagination.limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getExamInfo"
    /> -->

    <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[4,6, 10, 20, 40]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div> 
    </div>
  </div>
</template>

<script>

// 引入coach.js文件
import subject from '@/api/subject'
import { Alert } from 'element-ui'

export default {
  // name: 'myExam'
  data() {
    return {
      loading: false,
      total:null,
      datas:[],
      subject:{},
      pagination: { //分页后的考试信息
        current: 1, //当前页
        total: 0, //记录条数
        limit: 4 //每页条数
      }
    }
  },
  created() {
    this.getExamInfo()
    this.loading = true
  },
  // watch: {
    
  // },
  methods: {
    //获取当前所有考试信息
    getExamInfo() {
      subject.getSubjectListPage(this.pagination.current,this.pagination.limit,this.subject).then(res => {
        this.datas = res.data.rows
        this.pagination.total=res.data.total
        this.loading = false
        
        console.log(this.subject)
      }).catch(error => {
        console.log(error)
      })
    },
     //改变当前记录条数
     handleSizeChange(val) {
      this.pagination.limit = val
      this.getExamInfo()
    },
    //改变当前页码，重新发送请求
    handleCurrentChange(val) {
      this.pagination.current = val
      this.getExamInfo()
    },
 //   跳转到试卷详情页
    toExamMsg(examCode) {
      this.$router.push({path: '/examMsg', query: {examCode: examCode}})
      console.log(examCode)
    }
  }
}
</script>

<style lang="scss" scoped>

  
    .image {
      width: 100%;
      display: block;
    }

.pagination {
  padding: 20px 0px 30px 0px;
  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
.paper {
  h4 {
    cursor: pointer;
  }
}
.paper .item a {
  color: #000;
}
.wrapper .top .order {
  cursor: pointer;
}
.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.item .info i {
  margin-right: 2px;
  color: #0195ff;
}
.item .info span {
  margin-right: 2px;
}
.paper .item {
  width: 380px;
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217,222,234,0.3);
  transition: all 0.6s ease;
}
.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
  transform: scale(1.03);
}
.paper .item .info {
  font-size: 14px;
  color: #88949b;
}
.paper .item .name {
  font-size: 14px;
  color: #88949b;
}
.paper * {
  margin: 20px 0;
}
.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}
.top .icon {
  position: relative;
}
.wrapper .top {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
#myExam .search-li {
  margin-left: auto;
}
.top .search-li {
  margin-left: auto;
}
.top li {
  display: flex;
  align-items: center;
}
.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}
.wrapper .top {
  display: flex;
}
.wrapper .top li {
  margin: 20px;
}
#myExam {
  width: 980px;
  margin: 0 auto;
}
#myExam .title {
  margin: 20px;
}
#myExam .wrapper {
  background-color: rgb(255, 255, 255);
}
</style>
